import styled from '@emotion/styled';

import { colors } from '@/config/theme';

interface ContentProps extends HTMLElementProps {
  title?: string;
}

const ContentWrapDiv = styled.div`
  box-shadow: 0 0 8px ${colors.gray['200']};
  border-radius: 8px;
  background-color: #fff;
`;

export const Content = memo<ContentProps>((props) => {
  return (
    // <ContentWrapDiv className="content-wrap max-w-1440 min-w-1280 mx-auto p-12 mt-20 min-h-400">
    <ContentWrapDiv className="content-wrap mx-auto p-12 mt-20 min-h-400">
      {props.title && (
        <div className="content-title text-16--bold pl-4 pb-12 flex items-center">
          <div className="bg-primary-500 w-6 h-18 mr-8" />
          {props.title}
        </div>
      )}
      <div className="content">{props.children}</div>
    </ContentWrapDiv>
  );
});
